<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="list">
        <li>标签1</li>
        <li>标签2</li>
        <li>标签3</li>
        <li>标签4</li>
        <li>标签5</li>
        <p>P标签</p>
    </ul>
</body>
</html>
<script>
    //由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素
    //的事件。这种方法叫做事件代理
    var list = document.getElementById("list");
    list.onclick = function(event){
        if(event.target.tagName.toLowerCase() === 'li'){
            console.log('内容：' + event.target.innerHTML + ' 标签类型：' + event.target.tagName);
        }else if(event.target.tagName.toLowerCase() === 'p'){
            console.log('内容：' + event.target.innerHTML + ' 标签类型：' + event.target.tagName);
        }
    }
</script>